<template>
    <div class="teacher-certification">
        <!-- 侧边导航部分 -->
        <el-aside width="200px" class="side-nav">
            <el-menu :default-openeds="['1', '2', '3']">
                <el-submenu index="1">
                    <template slot="title">教师间等级认证</template>
                    <el-menu-item index="1-1">AI教师</el-menu-item>
                    <el-menu-item index="1-2">AI教练</el-menu-item>
                    <el-menu-item index="1-3">AI导师</el-menu-item>
                    <el-menu-item index="1-4">AI研修拓展</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <!-- 主体内容部分 -->
        <el-main>
            <el-row class="main-content">
                <el-col :span="24">
                    <!-- 顶部信息部分 -->
                    <el-card class="header-card">
                        <img src="path/to/header-image.jpg" class="header-image" />
                        <div class="header-info">
                            <h2>AI教师认证</h2>
                            <p>
                                AI教师认证是对教师教授人工智能内容的学习与认证，AI教师研修课程主要包含三大类：技术实操课，示范课，教师素养课。技术实操课主要包含AI课程相关技术学习，重点讲解硬件及对应的软件具体操作和背后的原理等；示范课是以其中一个知识片段为例示范课堂教学；教师素养课主要帮助教师学习和提升教学通用能力，如教学方法等培训。
                                AI教师认证需要教师完成包括理论课程和实操型2个部分的测试。测试通过后，可直接下载认证证书。
                            </p>
                        </div>
                    </el-card>

                    <!-- 课程搜索部分 -->
                    <el-row class="search-bar">
                        <el-col :span="18">
                            <el-select v-model="selectedCommunity" placeholder="AI未来社区" class="community-select">
                                <el-option label="AI未来社区" value="AI未来社区"></el-option>
                                <!-- 其他选项 -->
                            </el-select>
                        </el-col>
                        <el-col :span="6" class="button-group">
                            <el-button type="primary">认证考核</el-button>
                            <el-button>证书下载</el-button>
                        </el-col>
                    </el-row>

                    <!-- 选项卡部分 -->
                    <el-tabs v-model="activeTab" class="tabs">
                        <el-tab-pane label="全部" name="all"></el-tab-pane>
                        <el-tab-pane label="技术实操课" name="tech"></el-tab-pane>
                        <el-tab-pane label="示范课" name="demo"></el-tab-pane>
                        <el-tab-pane label="教师素养课" name="teacher"></el-tab-pane>
                        <!-- 其他选项卡 -->
                    </el-tabs>

                    <!-- 课程卡片部分 -->
                    <el-row :gutter="20" class="course-list">
                        <el-col :span="8" v-for="course in courses" :key="course.id">
                            <el-card shadow="hover" class="course-card">
                                <img :src="course.image" class="course-image" />
                                <div class="course-info">
                                    <h3>{{ course.title }}</h3>
                                    <p>{{ course.description }}</p>
                                    <span class="status-label">{{ course.status }}</span>
                                </div>
                                <div class="course-progress">
                                    <el-progress :percentage="course.progress"></el-progress>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchQuery: '',
            status: 'all',
            activeTab: 'all',
            selectedCommunity: 'AI未来社区',
            courses: [
                {
                    id: 1,
                    title: 'uCode4.0使用指南',
                    description: '技术实操课 - 1课时',
                    status: '未开始',
                    progress: 0,
                    image: 'path/to/course-image1.jpg'
                },
                {
                    id: 2,
                    title: 'uKit AI使用指南',
                    description: '技术实操课 - 4课时',
                    status: '未开始',
                    progress: 0,
                    image: 'path/to/course-image2.jpg'
                }
                // 其他课程
            ]
        };
    }
};
</script>

<style scoped>
.teacher-certification {
    display: flex;
}

.side-nav {
    background-color: #f5f5f5;
}

.main-content {
    padding: 20px;
}

.header-card {
    display: flex;
    padding: 20px;
    margin-bottom: 20px;
}

.header-image {
    width: 150px;
    height: auto;
    margin-right: 20px;
}

.header-info {
    flex: 1;
}

.search-bar {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.community-select {
    width: 100%;
}

.button-group {
    display: flex;
    justify-content: flex-end;
}

.tabs {
    margin-bottom: 20px;
}

.course-list {
    display: flex;
    flex-wrap: wrap;
}

.course-card {
    margin-bottom: 20px;
}

.course-image {
    width: 100%;
    height: auto;
}

.course-info {
    margin: 10px 0;
}

.status-label {
    color: #666;
}

.course-progress {
    margin-top: 10px;
}
</style>
e>